<template>
  <div id="app">
    <router-view />
    <Tabbor>
      <TabborItem>
        <router-link to="/">
          <img src="./assets/logo.png" alt="" />
          <p>首页</p>
        </router-link>
      </TabborItem>
      <TabborItem>
        <router-link to="/class">
          <img src="./assets/logo.png" alt="" />
          <p>分类</p>
        </router-link>
      </TabborItem>
      <TabborItem>
        <router-link to="/car">
          <img src="./assets/logo.png" alt="" />
          <p>购物车</p>
        </router-link>
      </TabborItem>
      <TabborItem>
        <router-link to="/my">
          <img src="./assets/logo.png" alt="" />
          <p>我的</p>
        </router-link>
      </TabborItem>
    </Tabbor>
  </div>
</template>
<script>
import Tabbor from "./components/Tabbor";
import TabborItem from "./components/TabborItem";
export default {
  components: {
    Tabbor,
    TabborItem,
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  color: black;
}
a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
img {
  width: 30px;
  height: 30px;
}
p {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
